<script setup>
const props = defineProps({
  dialog: {
    type: Boolean,
    default: false,
  },
  url: {
    type: String,
    default: "",
  },
  doubleBorder: {
    type: Boolean,
    default: false,
  },
  ioTitle: {
    type: String,
    default: "内标题",
  },
  titleCont: {
    type: String,
    default: "",
  },
  titleColor: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["emit"]);

const visible = ref(props.dialog);

const handle = () => {
  emit("hidden");
};

watch(
  () => props.dialog,
  (val) => {
    visible.value = val;
  }
);
</script>
<template>
  <div id="app">
    <el-dialog
      :show-close="false"
      top="0"
      v-model="visible"
      center
      :before-close="handle"
    >
      <div class="previews" style="height: 100%">
        <img :src="url" alt />
      </div>
    </el-dialog>
  </div>
</template> 
<style lang="scss" scoped>
#app {
  position: absolute;
  width: 100%;
  height: 100%;
  :deep .el-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1214px;
    height: 758px;
    padding: 28px;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 0;
    .el-dialog__body {
      padding: 0;
      height: calc(100%);
      .dialog_body {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>